<template>
  <div class="w-100 h-100 flex Boty" style="overflow-y: scroll">
    <div class="w-98 h-98">
      <!--统计大于1400-->
      <div v-if="windowWidthTwo >= 1400" class="flex">
        <div v-for="(item, index) in list" :key="index" class="flex head">
          <div class="w-95 h-90 flexLeft kun">
            <div v-if="item.inshow" class="mount">{{ item.text }}</div>
            <div v-else class="mount-Two">
              <i :class="item.text"></i>
            </div>
            <div class="mount-1">
              <div class="days">{{ item.name }}</div>
              <div class="days-1">{{ item.mount }}</div>
            </div>
          </div>
        </div>
      </div>
      <!--统计小于1400-->
      <div v-if="windowWidthTwo <= 1400" class="lessThan">
        <div v-for="(item, index) in list" :key="index" class="flex head-Two1">
          <div class="w-95 h-90 flexLeft kun">
            <div v-if="item.inshow" class="mount">{{ item.text }}</div>
            <div v-else class="mount-Two">
              <i :class="item.text"></i>
            </div>
            <div class="mount-1">
              <div class="days">{{ item.name }}</div>
              <div class="days-1">{{ item.mount }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- echarts-->
      <div
        :class="
          windowWidthTwo >= 1400 ? 'echarts-head-Two' : 'echarts-head-Two-1'
        "
      >
        <echartsOne></echartsOne>
      </div>
      <div
        :class="
          windowWidthTwo >= 1400 ? 'echarts-head-Two' : 'echarts-head-Two-1'
        "
      >
        <echartsTwo></echartsTwo>
      </div>
      <div
        :class="
          windowWidthTwo >= 1400 ? 'echarts-head-Two' : 'echarts-head-Two-1'
        "
      >
        <echartsShun></echartsShun>
      </div>
    </div>
  </div>
</template>
<script>
import echartsOne from "@/components/index/echarts/echartsOne.vue";
import echartsTwo from "@/components/index/echarts/echartsTwo.vue";
import echartsShun from "@/components/index/echarts/echartsShun.vue";

export default {
  components: {
    echartsOne,
    echartsTwo,
    echartsShun,
  },
  props: ["windowWidth"],
  data() {
    return {
      windowWidthTwo: window.innerWidth,
      list: [
        {
          text: "¥",
          inshow: true,
          name: "今日收款",
          mount: "0",
        },
        {
          text: "¥",
          inshow: true,
          name: "今日到账",
          mount: "0",
        },
        {
          text: "el-icon-shopping-cart-2",
          inshow: false,
          name: "今日订单",
          mount: "0",
        },
        {
          text: "el-icon-shopping-cart-2",
          inshow: false,
          name: "今日成功",
          mount: "0",
        },
        {
          text: "el-icon-shopping-cart-2",
          name: "今日失败",
          inshow: false,
          mount: "0",
        },
        {
          text: "el-icon-shopping-cart-2",
          name: "今日退款",
          inshow: false,
          mount: "0",
        },
      ],
    };
  },
  watch: {
    windowWidth(e) {
      this.windowWidthTwo = e;
    },
  },
};
</script>
<style scoped>
.Boty {
  background: #eeeeee;
}

.head {
  width: 16.666%;
  height: 100px;
}

.head-Two1 {
  width: 33.333%;
  height: 100px;
}

.mount {
  font-size: 50px;
  margin-left: 25px;
  color: red;
}

.mount-Two {
  font-size: 50px;
  margin-left: 25px;
  color: #008800;
}

.mount-1 {
  margin-left: 15px;
}

.days {
  font-size: 16px;
  margin-top: 5px;
}

.days-1 {
  font-size: 16px;
  font-weight: 400;
}

.kun {
  background: #ffffff;
  cursor: pointer;
}

.kun:hover {
  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.5);
}

.lessThan {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.echarts-head-Two {
  width: 99%;
  height: 400px;
  margin-left: 0.4%;
  background: #ffffff;
  margin: 10px auto;
}

.echarts-head-Two-1 {
  width: 98.5%;
  height: 400px;
  margin-left: 0.4%;
  background: #ffffff;
  margin: 10px auto;
}
</style>
